<template>
    <div class="w-full bg-[#0C0E12]">
        <div class="py-16 lg:py-24 border-t border-b border-[#22262F] flex flex-col max-w-screen-xl mx-auto px-4 lg:px-8">
            <p class="font-semibold text-[#CECFD2] font-sans text-base">Features</p>
            <h2 class="mt-1 lg:mt-3 font-sans font-semibold text-2xl lg:text-4xl text-[#F7F7F7]">Deliver audio, any way you want.</h2>
            <p class="mt-3 lg:mt-5 font-sans text-[#94979C] text-base lg:text-lg">Use AmplitudeJS to customize the design of any HTML5 Audio Element.</p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mt-8 lg:mt-16">
                <div class="flex flex-col p-6 bg-[#13161B] rounded-[10px]">
                    <img src="/images/icons/blue-square-pen.svg" class="w-12"/>
                    <h3 class="mt-8 lg:mt-16 font-sans font-semibold text-lg text-[#F7F7F7]">Fully customizable</h3>
                    <p class="mt-1 font-sans text-[#94979C] text-base">Break free from the limitations of native browser design elements.</p>
                </div>
                
                <div class="flex flex-col p-6 bg-[#13161B] rounded-[10px]">
                    <img src="/images/icons/blue-square-lightning.svg" class="w-12"/>
                    <h3 class="mt-8 lg:mt-16 font-sans font-semibold text-lg text-[#F7F7F7]">Dynamic Playlists</h3>
                    <p class="mt-1 font-sans text-[#94979C] text-base">Build custom audio experiences on the fly. </p>
                </div>

                <div class="flex flex-col p-6 bg-[#13161B] rounded-[10px]">
                    <img src="/images/icons/blue-square-broadcasts.svg" class="w-12"/>
                    <h3 class="mt-8 lg:mt-16 font-sans font-semibold text-lg text-[#F7F7F7]">Live Broadcasts</h3>
                    <p class="mt-1 font-sans text-[#94979C] text-base">Engage with your audience by streaming your audio through a live stream.</p>
                </div>

                <div class="flex flex-col p-6 bg-[#13161B] rounded-[10px]">
                    <img src="/images/icons/blue-square-star.svg" class="w-12"/>
                    <h3 class="mt-8 lg:mt-16 font-sans font-semibold text-lg text-[#F7F7F7]">Audio Visualizer</h3>
                    <p class="mt-1 font-sans text-[#94979C] text-base">Take your listening experience to the next level. Create your own visualizer.</p>
                </div>
            </div>
        </div>
    </div>
</template>